<html>
	<head>
		<link href="combinedcss.css" type="text/css" rel="stylesheet" />
		<link href="default.css" type="text/css" rel="stylesheet" />
		<link href="cpfxforms.css" type="text/css" rel="stylesheet" />
		<link href="xdefault.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript">
			var scriptCallback = initialize;
			function initialize() {
				tableObject = new vg.visualization.MultipleSelectionList({
			        container : "tableid",
			        listName : "Select Delivery Groups",
			        headers : [{displayName : "Delivery Groups", width : "150px", dataName : "DeliveryGroup"}, {displayName : "Created By", width : "150px", dataName : "CreatedBy"}],
			        numRows : 15,
			        rowHeight : "15px"
			    });
			    var obj = [];
			    for(var i =0; i<37; i++) {
			        obj.push({DeliveryGroup : "DeliveryGroup" + i, CreatedBy : "CreatedBy" + i});    
			    }
			    tableObject.setData(obj);
				for(i =0; i<10;i++) {
					obj.push({DeliveryGroup : "DeliveryGroup" + i, CreatedBy : "CreatedBy" + i}); 
				}
				tableObject.setData(obj);
				tableObject.setEventListener("onrowchecked", function (eventObject) {
					debugger;
				});
				tableObject.setEventListener("oncheckall", function (eventObject) {
					debugger;
				});
				tableObject.setEventListener("onokclick", function (eventObject) {
					debugger;
				});
				tableObject.setEventListener("oncancelclick", function (eventObject) {
					debugger;
				});							
				/*for(i = 0;i<38;i++){
					obj.pop();
				}debugger;
				tableObject.setData(obj);*/
			}
			
			function hide() {
				tableObject.hideMenu();
			}

			function show() {
				tableObject.showMenu();
			}			
		</script>
	</head>
	<body>
		<div id = "tableid">
			
		</div>
		<button onclick = hide();>hide</button>
		<button onclick = show();>show</button>
		<script type="text/javascript" src="list.js"></script>	
	</body>
</html>